<template>
  <div style="width: 90%;">
    <el-main>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="书名"
          prop="bookname"
          :rules="[
            { required: true, message: '书名不能为空'}]"
        >
          <el-input v-model="ruleForm.bookname" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="书号"
          prop="booknumber"
          :rules="[
            { required: true, message: '书号不能为空'},
            { type: 'number', message: '书号必须为数字值'}
          ]"
        >
          <el-input v-model.number="ruleForm.booknumber" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="作者"
          prop="bookauthor"
          :rules="[
            { required: true, message: '作者不能为空'}
          ]"
        >
          <el-input v-model.number="ruleForm.bookauthor" autocomplete="off" />
        </el-form-item>
        <el-form-item label="存放位置">
          <el-select v-model="region1" placeholder="请选择存放区域">
            <el-option
              v-for="(val,index) in floor"
              :key="index"
              :label="val+'区'"
              :value="val"
            >
              {{ val }}区
            </el-option>
          </el-select>
          <el-select v-model="region2" placeholder="请选择存放书架">
            <el-option
              v-for="(val, key) in area"
              :key="key"
              :label="val+'架'"
              :value="val"
            >
              {{ val }}架
            </el-option>
          </el-select>
          <el-select v-model="region3" placeholder="请选择AB面">
            <el-option
              v-for="(val,index) in bookRack"
              :key="index"
              :label="val+'面'"
              :value="val"
            >
              {{ val }}面
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入库时间">
          <el-col :span="12">
            <el-date-picker v-model="ruleForm.bookontime" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-col>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="ruleForm.bookleft" :min="1" :max="100" label="描述文字" @change="handleChange" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">入库</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </div>
</template>

<script>
import { onBook } from '@/api/book'

export default {
  name: 'BookOnShelf',
  data() {
    return {
      floor: ['A', 'B', 'C'],
      area: ['12', '13', '14', '15'],
      bookRack: ['A', 'B'],
      region1: '',
      region2: '',
      region3: '',
      ruleForm: {
        bookname: '',
        bookauthor: '',
        booklocation: '',
        booknumber: '',
        bookontime: '',
        bookleft: 1
      }
    }
  },
  methods: {
    handleChange(value) {
      this.ruleForm.count = value
    },
    submitForm(formName) {
      console.log(this.ruleForm.bookontime)
      this.ruleForm.bookontime = Date.parse(this.ruleForm.bookontime)
      console.log(this.ruleForm.bookontime)
      this.ruleForm.booklocation = this.ruleForm.region1 + this.region2 + this.region3
      this.$refs[formName].validate((valid) => {
        if (valid) {
          onBook(this.ruleForm).then(response => {
            this.$message({
              message: '提交成功！',
              type: 'success'
            })
          })
        } else {
          this.$message({
            message: '提交失败！',
            type: 'error'
          })
          return false
        }
      })
      console.log(this.ruleForm)
    }
  }
}
</script>

<style scoped>

</style>
